<template>
<div>
  <el-page-header @click="$router.back()" content="修改景点"></el-page-header>
  <el-row justify="center">
    <el-card style="width: 500px">
    <el-form ref="scenicInfo" :model="scenicInfo">
      <el-form-item label="景点名称">
        <el-input disabled v-model="scenicInfo.scenicName"/>
      </el-form-item>

      <el-form-item label="景点描述">
        <el-input type="textarea" autosize v-model="scenicInfo.scenicDescription" maxlength="500" show-word-limit/>
      </el-form-item>

      <el-form-item label="景点类型">
        <el-radio-group v-model="scenicInfo.scenicType">
          <el-radio label="LAKE">湖</el-radio>
          <el-radio label="HILL">山</el-radio>
          <el-radio label="FLOWER">花</el-radio>
          <el-radio label="TREE">树</el-radio>
          <el-radio label="KIOSK">亭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="景点配图">
        <div v-for="image in scenicImage">
          <el-image
              style="width: 100px; height: 100px"
              :src="image.imageUrl"
              fit="contain"
          >
          </el-image>
          <el-button @click="deleteImage(image.imageId,image.imageUrl)" type="text">删除</el-button>
          &nbsp;
        </div>
        <el-upload
            class="upload-demo"
            ref="upload"
            :action="`${urlUpload}/oss/uploadFile`"
            :before-upload="beforeUpload"
            :file-list="imageList"
            :auto-upload="false"
            list-type="picture"
            multiple
            :limit=4
            :on-exceed="exceed"
            :on-success="submitSuccess"
            :on-error="errorUpload"
            :on-remove="removeImage"
        >
          <template  #trigger>
            <el-button size="small" type="primary">选取图片</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过1MB,最大数量4张</div>
          </template>
          <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
          >上传到服务器</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
      <el-button @click="submitForm" :loading="loading" type="primary">修改</el-button>
    </el-card>
  </el-row>

  </div>
</template>

<script>
import {
  deleteImage,
  getScenicImage,
  getScenicInfo,
  insertImage,
  updateScenicInfo
} from "@/api/multimedia";
import {baseURLMulti} from "@/setting";

export default {
  name: "updateScenic",
  props:['scenicId'],
  data(){
    return{
      urlUpload:baseURLMulti,
      loading:false,
      imageList:[],
      scenicType:{'LAKE':'湖','FLOWER':'花','KIOSK':'亭','HILL':'山','TREE':'树'},
      scenicInfo:{
        scenicId:'',
        scenicName:'',
        scenicDescription:'',
        scenicType:0,
      },
      scenicImage:[],
      sendImage:[]
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.getScenic()
    })
  },
  methods:{
    //图片上传成功
    submitSuccess(response, file, fileList){
      this.sendImage.push(response.data.imageUrl)
    },
    //图片上传失败
    errorUpload(){
      this.$message({
        type:'error',
        message:'图片上传失败，请检查网络后重试'
      })
    },
    //图片上传方法
    submitUpload(){
       this.$refs.upload.submit()
    },

    //图片数量超出限制
    exceed(){
      this.$message({
        type:'warning',
        message:'最大只能上传4张图片'
      })
    },
    beforeUpload(file){
      const isJPG = file.type === 'image/jpeg'||file.type === 'image/jpg' ||file.type==='image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG||!isLt2M) {
        this.$message({
          type:'warning',
          message:'上传头像图片只能是 jpg、jpeg 格式,并且上传头像图片大小不能超过 1MB!'
        })
        return false
      }
      return true
    },
    //删除图片
    deleteImage(imageId,url){
      deleteImage(imageId,url).then(()=>{
        getScenicImage(this.scenicId).then(response=>{
        this.scenicImage=response.data.scenicImage
      })
      }).catch(()=>{
        this.$message({
          type:"error",
          message:"删除失败"
        })
      })
    },
    //移除图片
    removeImage(file){
      this.sendImage.splice(this.sendImage.indexOf(file.response.data.imageUrl),1)
    },
    getScenic(){
      getScenicInfo(this.scenicId).then(response=>{
        this.scenicInfo=response.data.scenicInfo
        getScenicImage(this.scenicId).then(response=>{
          this.scenicImage=response.data.scenicImage
        })
      })
    },

    submitForm(){
      const a=this.scenicImage.length+this.sendImage.length
      if (a>4){
        this.$message({
          type:'warning',
          message:'图片最多4张，请删除多余图片'
        })
        return
      }
      //文本
      const form={
        scenicId:this.scenicId,
        scenicName:this.scenicInfo.scenicName,
        scenicDescription:this.scenicInfo.scenicDescription,
        scenicType:this.scenicInfo.scenicType
      }
      //图片
      const imageForm={
        imageType:'SCENIC',
        imageName:this.scenicInfo.scenicName,
        imageList:this.sendImage,
        scenicId:this.scenicId
      }
      this.loading=true
      //更新数据
      updateScenicInfo(form).then(()=>{
        if (this.sendImage<1){
          this.loading=false
          this.$notify({
            type:'success',
            message:'景点更新成功'
          })
          return
        }
        insertImage(imageForm).then(()=>{
          this.imageList=[]
          this.$notify({
            type:'success',
            message:'景点更新成功'
          })
          this.getScenic()
          this.loading=false
        }).catch(()=>{
          this.loading=false
          this.$notify({
            type:'error',
            message:'景点更新失败'
          })
        })
      }).catch(()=>{
        this.loading=false
        this.$notify({
          type:'error',
          message:'景点录入失败'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
